<template>
  <div>
    <a style="color:cadetblue;font-size: 25px; top: 50px;">深加工信息</a> <el-button @click="updateorAdd()">设置</el-button>
 <hr>
 <table width="1000px">
  <tr>
    <td>班组{{ breedhtml.processclass }}</td>
    <td>负责人{{ breedhtml.processPersonincharge }}</td>
  </tr>
 </table>
  </div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;" >食品安全信息</a>
 <hr>
 <table>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.bossImages
" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimages()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>

<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;" >供应商信息</a>
 <hr>
 <table>
  <tr style="font-size: 20px"><b>原料</b> <el-button @click="AddData()">设置</el-button></tr>
  <br>
  <tr>生产批次{{ breedhtml.processLot }}</tr>
 <br>
  <tr style="font-size: 20px"><b>相关资料</b></tr>
  <hr>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.bossImagesthrre
" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="Promagest()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
  <tr style="font-size: 20px"><b>辅料</b><el-button @click="AddData()">设置</el-button></tr>
  <br>
  <tr>生产批次{{ breedhtml.processLot }}</tr>
  <br>
  <tr style="font-size: 20px"><b>相关资料</b></tr>
  <hr>
  <tr>
    <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.bossImagesthrre
" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="Promagest()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
  </tr>
  <tr style="font-size: 20px"><b>添加剂</b><el-button @click="AddData()">设置</el-button></tr>
  <br>
  <tr>生产批次{{ breedhtml.processLot }}</tr>
  <br>
  <tr style="font-size: 20px"><b>相关资料</b></tr>
  <hr>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.bossImagesthrre
" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="Promagest()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
  <tr style="font-size: 20px"><b>包材</b><el-button @click="AddData()">设置</el-button></tr>
  <br>
  <tr>生产批次{{ breedhtml.processLot }}</tr>
  <br>
  <tr style="font-size: 20px"><b>相关资料</b></tr>
  <hr>
  <tr>
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.bossImagesthrre
" style="width: 100%;">
      <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
  <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="Promagest()" style="width: 120px;height: 120px;">
     <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<div style="margin-top: 100px;">
  <a style="color:cadetblue;font-size: 25px;">企业信息</a> <el-button @click="ProDction()" >设置</el-button>
 <hr>
 <table width="1000px">
  <tr>
    <td>公司名称{{ breedhtml
.processBossName }}</td>
    <td>生产许可证{{ breedhtml.processlicence }}</td>
  </tr>

 </table>
</div>
<div style="margin-top: 100px;" >
  <a style="color:cadetblue;font-size: 25px;">企业照片</a>
 <hr>
 <table >
  <tr style="width: 1000px;">
    <td style="width: 1500px;">
      <div v-for="item in breedhtml.
bossImagestwo" style="width: 100%;">
          <el-button class="images" type="danger" :icon="Delete" circle @click="deel(item.images,item.productionimagesid)"></el-button>
        <img style="width: 150px;height: 150px;" class="buttonss" :src="item.images" > 
     </div>
      <el-button  list-type="picture-card" @click="GETimagest()" style="width: 120px;height: 120px;">
  <el-icon><Plus /></el-icon>
 </el-button>
    </td>
  </tr>
 </table>
</div>
<el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="班组" :label-width="formLabelWidth" prop="processclass">
        <el-input v-model="form.processclass" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth" prop="processPersonincharge">
        <el-input v-model="form.processPersonincharge" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisibles" title="Shipping address" width="500">
    <el-form :model="from_"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="ruless"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="公司名称" :label-width="formLabelWidth" prop="processBossName">
        <el-input v-model="from_.processBossName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="公司生产许可证" :label-width="formLabelWidth" prop="processlicence">
        <el-input v-model="from_.processlicence" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForms(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisiblet" title="Shipping address" width="500">
    <el-form :model="from_"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="ruless"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="生产批次" :label-width="formLabelWidth" prop="processLot">
        <el-input v-model="from_.processLot" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFormss(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisibless" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentRanges()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>
  <el-dialog v-model="dialogFormVisibleone" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="getLeadingCommentONe()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>
         
   <el-dialog v-model="Progetcessdell" title="添加图片" width="500">
            <el-form :model="form">   
              <el-upload
              class="avatar-uploader"
              action="https://localhost:7116/api/SourceController1/GETimages"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.iamges" :src="form.iamges" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="ProcessDellimges()">确认</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  取消
                </el-button>
                  </div>
                </template>
              </el-dialog>

</template>
<script lang="ts" setup>
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
  import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router';
const route=useRoute()
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const router=useRouter();
const dialogFormVisibles = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisiblet = ref(false)
const dialogFormVisibless = ref(false)
const dialogFormVisibleone = ref(false)
const Progetcessdell = ref(false)
const formLabelWidth = '140px'
const form=reactive({
  processclass: "",
  processPersonincharge: "",
  iamges:'',
})
const from_=reactive({
  processBossName: "",
  processlicence: "",
  proDuctionBasicid: 0,
  processLot:'',
})
onMounted(()=>{

  breedhtmls()


})

/////////////////////////////////////////

// 这个页面从养殖信息粘过来的命名方式没改后期优化

///////////////////////////




const breedhtml=ref([])
const getnwe=ref([])
///深加工信息显示
const breedhtmls=(()=>{
  var  proDuctionBasicid=localStorage.getItem('Details');
  axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessHTML',{
    proDuctionBasicid: Number(proDuctionBasicid)
  }).then(res=>{

      breedhtml.value=res.data.data

      console.log(res.data,'zzzzzzzzzz')
  })

})


const rules = reactive({
  processclass: [
    { required: true, message: '班组信息不能为空', trigger: 'blur' },
  ],
  processPersonincharge: [
    {
      required: true,
      message: '负责人不能为空',
      trigger: 'change',
    },
  ],
 
})

const ruless = reactive({
  
  公司名称不能为空: [
    {

      required: true,
      message: '公司名称不能为空',
      trigger: 'change',
    },
  ],
  processlicence: [
    {
      required: true,
      message: '公司生产许可证不能为空',
      trigger: 'change',
    },
  ],
  processLot: [
    {
      required: true,
      message: '生产批次不能为空',
      trigger: 'change',
    },
  ],

})

///深加工信息添加
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {

  var proDuctionBasicid=localStorage.getItem('Details');
  if (valid) {

      

    axios.post('https://localhost:7116/api/DeepprocessingController1/Deepprocessing',{
  processclass: form.processclass,
  processPersonincharge: form.processPersonincharge,
  proDuctionBasicid: Number(proDuctionBasicid)
}


    ).then(res=>{
      if(res.data.code==1)
    {
        ElMessage.success("添加成功");
        breedhtmls()
    }

    })
    dialogFormVisible.value=false;

  } else {
    console.log('error submit!', fields)
  }
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
dialogFormVisible.value=false;
dialogFormVisibles.value=false;
}
//触发打开弹出框
const updateorAdd=(()=>{

  dialogFormVisible.value=true;

})
//触发弹出框
const ProDction=(()=>{
  dialogFormVisibles.value=true;
})

//深加工企业添加
const submitForms = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
  var proDuctionBasicid=localStorage.getItem('Details');


  if (valid) {
    axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessingBoss',{

          processBossName:from_.processBossName,
          processlicence: from_.processlicence,
          proDuctionBasicid: Number(proDuctionBasicid)

          }).then(res=>{
          if(res.data.code==1)
          { 
            ElMessage.success('设置成功')
            breedhtmls()
          }
          dialogFormVisible.value=false;
          })
  } else {
    console.log('error submit!', fields)
  }
})
}

//生产批次添加修改
const submitFormss = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
  var proDuctionBasicid=localStorage.getItem('Details');


  if (valid) {
    axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessingLot',{

      processLot:from_.processLot,
          proDuctionBasicid: Number(proDuctionBasicid)

          }).then(res=>{
          if(res.data.code==1)
          { 
            ElMessage.success('设置成功')
            breedhtmls()
          }
          dialogFormVisible.value=false;
          })
  } else {
    console.log('error submit!', fields)
  }
})
}


const GETimages=(()=>{

  dialogFormVisibless.value=true;

})
///相关资料图片
const Promagest=(()=>{

  Progetcessdell.value=true;

})
//相关资料图片
const ProcessDellimges=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessingImagesGET',{ 
  proDuctionBasicid: Number(proDuctionid),
  getimaegs: form.iamges
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  Progetcessdell.value=false;
  form.iamges='';
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}
})
})



const handleAvatarSuccess = (url:any) => {
form.iamges="https://localhost:7116"+url
}

const beforeAvatarUpload = (rawFile:any) => {
  if (rawFile.type !== 'image/jpeg'&&
    rawFile.type !== 'image/jpg'&&
    rawFile.type !== 'image/png'
  ) {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

///视频安全图片添加
const getLeadingCommentRanges=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessingImages',{ 
  proDuctionBasicid: Number(proDuctionid),
  getimaegs: form.iamges
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibless.value=false;
  form.iamges='';
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}

})


})


const GETimagest=(()=>{
  dialogFormVisibleone.value=true;
})





//深加工企业照片添加
const getLeadingCommentONe=(()=>{


var proDuctionid=localStorage.getItem('Details')
axios.post('https://localhost:7116/api/DeepprocessingController1/DeepprocessingImagesJoker',{ 
  proDuctionBasicid: Number(proDuctionid),
  getimaegs: form.iamges
}).then(res=>{


  console.log(res.data.data,'22222222')
  if(res.data.data==1)
{
  ElMessage.success('添加成功')
  dialogFormVisibleone.value=false;
  form.iamges='';
  breedhtmls()
}
if(res.data.data==-7)
{
  
 ElMessage.error('最多只能添加6条')
}
})
})

//删除所有方法都可用
const deel=((imagest:any,ProductionImagesid:number)=>{


var ProductionImagesids=localStorage.getItem('Details');

axios.post('https://localhost:7116/api/SourceController1/Deel',{
  ProDtctionid:Number(ProductionImagesids),
  images:imagest
}).then(res=>{
  if(res.data.code==0)
{
  ElMessage.success('删除成功');
  breedhtmls()
}

})


})


const AddData=(()=>{


  dialogFormVisiblet.value=true;

})
const getLeadingCommentONes=(()=>{


  

})




</script>

<style scoped>

.images{

top: 0px;
width: 20px;
height: 20px;
float: left;
left: 150px;
z-index: 2;
position: relative;
cursor: pointer;
}
.buttonss{
float: left;
z-index: 1;
border: none;
}
</style>
